<!-- 层叠性：计算权重
层叠性：就是css处理冲突的能力。 所有的权重计算，没有任何兼容问题！

CSS像艺术家一样优雅，像工程师一样严谨。

我们来看一个例子，就知道什么叫层叠性了。 -->


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
      #box {
        color: red;
      }
      
      .heizi {
        color: green;
      }
      
      p {
        color: blue !important;
      }
    </style>
</head>
<body>
  <!-- 只需要给标签选择器的加一个!important标记，此时其权重为无穷大
   !important提升的是一个属性，而不是一个选择器
   ，!important 尽量不要用, 知道就行了
  -->
   <p class="heizi" id="box">我是什么颜色</p>
</body>
</html>
